<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <script>
        (function (doc, win) {
            // document.addEventListener('touchmove', function (e) {
            //   e.preventDefault();
            // });
            var docEl = doc.documentElement,
                // orientationchange 事件 用来监听手机屏幕的反转
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth; //(window.innerWidth);UC 或者QQ 安卓4.0 以下原生浏览器下面是没有
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            //DOMContentLoaded dom 加载完成，onload 有什么区别 dom css js OK 才执行的
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        img {
            /*display: inline-block;*/
        }

        .body {
            width: 100%;
            height: 100%;
            /*background: aqua;*/
        }

        @media (max-width: 768px) {
            .body-login {
                width: 7.5rem;
                height: 100%;
                background: #ffffff;
            }

            .body-main {
                width: 100%;
                height: 100%;
                padding: 0.5rem;
            }

            .body-title {
                width: 100%;
                font-size: 0.48rem;
                color: #68129A;
                padding-top: 2rem;
                padding-bottom: 0.75rem;
                font-weight: bold;
                text-align: center;
            }

            .body-input {
                width: 100%;

            }

            .body-input-item {
                width: 100%;
                height: 0.8rem;
                border-radius: 0.4rem;
                line-height: 0.8rem;
                background: #EEEEEE;
                margin-bottom: 0.6rem;
                padding-left: 0.46rem;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
            }

            .body-input-item img {
                width: 0.4rem;
                height: 0.4rem;
                /*background: #222222;*/
                /*font-size: 0.4rem;*/
                /*color: #68129A;*/
            }

            .body-input-item-img {
                width: 0.4rem;
                height: 0.4rem;
                background: cadetblue;
            }

            .body-input-item input {
                display: block;
                outline: 0;
                background: #EEEEEE;
                border: none;
                line-height: 0.8rem;
                width: 80%;
                padding-left: 0.1rem;
            }

            .body-register {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                margin-bottom: 0.6rem;
            }

            .body-register div {
                font-size: 0.24rem;
                color: #68129A;
            }

            .body-button input {
                width: 100%;
                height: 0.8rem;
                background: linear-gradient(161deg, rgba(104, 18, 154, 1), rgba(59, 30, 170, 1));
                border-radius: 0.4rem;
                font-size: 0.36rem;
                text-align: center;
                line-height: 0.8rem;
                color: #ffffff;
                border: none;
                outline: 0;
            }
        }

        @media (min-width: 768px) {
            .body-login {
                width: 750px;
                height: 100%;
                background: #EEEEEE;
                margin: 0 auto;
            }

            .body-main {
                width: 100%;
                height: 100%;
                padding: 50px;
            }

            .body-title {
                width: 100%;
                font-size: 48px;
                color: #68129A;
                padding-top: 200px;
                padding-bottom: 75px;
                font-weight: bold;
                text-align: center;
            }

            .body-input {
                width: 100%;

            }

            .body-input-item {
                width: 100%;
                height: 80px;
                border-radius: 40px;
                line-height: 80px;
                background: #ffffff;
                margin-bottom: 60px;
                padding-left: 46px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
            }

            .body-input-item i {
                font-size: 40px;
                color: #68129A;
            }

            .body-input-item input {
                display: block;
                outline: 0;
                background: #ffffff;
                border: none;
                line-height: 80px;
                width: 80%;
                padding-left: 10px;
            }

            .body-register {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                margin-bottom: 60px;
            }

            .body-register div {
                font-size: 24px;
                color: #68129A;
            }

            .body-button input {
                width: 100%;
                height: 80px;
                background: linear-gradient(161deg, rgba(104, 18, 154, 1), rgba(59, 30, 170, 1));
                border-radius: 40px;
                font-size: 36px;
                text-align: center;
                line-height: 80px;
                color: #ffffff;
                border: none;
                outline: 0;
            }
        }
    </style>
</head>
<body>
<div class="body">
    <div class="body-login">
        <div class="body-main">
            <div class="body-title">登录</div>
            <form name="loginForm" method="post" th:action="${loginProcessUrl}">
                <div class="body-input">
                    <div class="body-input-item">
                        <div class="body-input-item-img"></div>
                        <!--                       <i class="iconfont icon-icon-user"></i>-->
                        <input type="text" name="username" placeholder="请输入手机号/邮箱/账号" value="">
                    </div>
                    <div class="body-input-item">
                        <div class="body-input-item-img"></div>
                        <!--                        <i class="iconfont icon-suo"></i>-->
                        <input type="password" name="password" placeholder="请输入6位数密码" value="">
                    </div>
                </div>
                <!--                <div class="body-register">-->
                <!--                    <div>立即注册</div>-->
                <!--                    <div>忘记密码</div>-->
                <!--                </div>-->
                <div class="body-button">

                    <p style="color: red;font-size: 16px;text-align: center;" th:if="${param.error}">用户名或密码错误</p>
                    <input class="button" type="submit" value="登录"/>

                    <!--                    <div >登录</div>-->
                </div>

            </form>
        </div>
    </div>
</div>
</body>
</html>
